<template>
  <div>
    <div class="container">
      <form class="login-form" action="#" method="post">
        <h2 class="text-center">登陆管理系统</h2>
        <div class="login-wrap">
          <!-- icon_lock_alt -->
          <p class="login-img"><i class="icon_lock_alt"></i></p>
          <div class="input-group">
            <span class="input-group-addon"
              ><i class="ace-icon fa fa-user"></i
            ></span>
            <input
              type="text"
              name="u_name"
              class="form-control"
              placeholder="用户名"
              autofocus
              required
              v-model="name"
              @blur="checkAdminName"
            />
            <span  class="errMess">{{ errMsg1 }}</span>
            
          </div>
          <!-- <div class="input-group" style="font-size: 100px !important"> -->
          <div class="input-group">
            <span class="input-group-addon"
              ><i class="ace-icon fa fa-lock"></i
            ></span>
            <input
              type="password"
              name="u_password"
              class="form-control"
              placeholder="密码"
              autofocus
              required
              v-model="password"
              @blur="checkAdminPassword"
            />
            <span  class="errMess">{{ errMsg2 }}</span>
          </div>
          <label class="checkbox" style="margin-left: 20px">
            <input
              type="checkbox"
              value="remember-me"
              v-model="checked"
            />记住我
            <span class="pull-right"> <a href="#">忘记密码?</a></span>
          </label>
          <button
            class="btn btn-primary btn-lg btn-block"
            type="button"
            @click="login()"
          >
            登陆
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      name: "",
      password: "",
      // 是否选中记住我
      checked: false,
      errMsg1: "",
      errMsg2: "",
    };
  },
  // 记住回显
  created() {
    if (
      localStorage.getItem("saveAdminName") == null ||localStorage.getItem("saveAdminName") == "") {
      // 没有记住的值
      this.name = '', 
      this.password = ''
    } else {
      // 存在记住的值
      this.name = localStorage.getItem("saveAdminName");
      this.password = localStorage.getItem("saveAdminPassword");
      this.checked = true;
    }
  },
  methods: {
    // 表单校验
    checkAdminName: function () {
      if (this.name == ""||this.name==null) {
        this.errMsg1 = "用户名不能为空";
        return false;
      } else {
        this.errMsg1 = "";
        return true;
      }
    },
    checkAdminPassword: function () {
      if (this.password == ""||this.password==null) {
        this.errMsg2 = "密码不能为空";
        return false;
      } else {
        this.errMsg2 = "";
        return true;
      }
    },
    // 执行登录
    login: function () {
      if (!this.checkAdminName() & this.checkAdminPassword()) {
        event.preventDefault();
      } else {
        // 验证完成，执行登录
        // 判断是否记住我的功能
        if (this.checked) {
          this.checked = true;
          // 记住我
          localStorage.setItem("saveAdminName", this.name);
          localStorage.setItem("saveAdminPassword", this.password);
        } else {
          this.checked = false;
          localStorage.removeItem("saveAdminName");
          localStorage.removeItem("saveAdminPassword");
        }
        // 发送登录请求
        this.$axios.get("http://localhost:8080/adminLogin?name="+this.name +"&password="+this.password).then((response) => {
            if (response.data.code === 0) {
              this.errMsg2 = response.data.msg;
            } else {
                                // 将token存储到localStorage里面
                  // localStorage.setItem("rLogin",response.data.data[1]);
                  localStorage.setItem("adminLoginName",response.data.data[0]);
                  // 把token放到cookie里面，设置一天的cookie过期时间
                  this.$setCookie("adminToken",response.data.data[1],1);
                  this.$router.push('/admin_index')
            }
          });
      }
    },
  },
};
</script>

<style scoped>
@import url("../../../public/css/bootstrap.min.css");
/* @import url('../../../public/css/font-awesome.min.css'); */
@import url("../../../public/css/style.css");
</style>